<template>
	<view>
		<!-- #ifdef H5-ONLY -->
		<theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999">
			<view class="nav-right-icon" v-if="currentTab == 0 ">
				<u-icon name="plus-circle" size="38" color="#FFF" @tap="addStoreBox"></u-icon>
			</view>
		</theme-navbar>
		<!-- #endif -->

		<!-- #ifdef H5-WECHAT || H5-EMP -->
		<fab-button v-if="currentTab == 0" :content="fContent" @fabtrigger="fabtrigger" />
		<!-- #endif -->
		<view class="box-search-lay" :style="{'top': isHideNav ? 0 : '44px'}">
			<view class="boxSearch">
				<u-search shape="round" :clearabled="true" :showAction="true" actionText="确定" :animation="true"
					:placeholder="plTitle" v-model="searchKey" @custom="toSearchList"></u-search>
			</view>
			<view class="tab-lay">
				<u-tabs :is-scroll="false" :list="tabList" :current="currentTab" @change="tabChange"></u-tabs>
			</view>
		</view>

		<view class="content u-page">

			<me-table :i="0" :index="0" :top="120" :load-data="loadData" :height="getListViewHeight()"
				:init-load="false" ref="mescrollItem0">
				<view slot-scope="d" class="list-item-root">
					<u-swipe-action :show="d.data.show" :index="d.data.qrUuid" :disabled="d.data.swiperDisabled"
						@click="swiperClick" @open="swiperOpen" :options="d.data.swiperOptions">
						<view class="list-lay">
							<storeBoxManageListItem :itemInfo="d.data"></storeBoxManageListItem>
						</view>
					</u-swipe-action>
				</view>
			</me-table>
		</view>
	</view>
</template>


<script>
	import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
	import meTable from "@/components/me-table.vue";
	import storeBoxManageListItem from "./components/storeBoxManageListItem.vue";
	import fabButton from '@/components/uni-fab.vue';
	import storeService from '@/service/store/store.service.js';
	import {
		C_STORE_BOX_STATUS,
	} from "@/service/store/mapping/enum.js"


	export default {
		components: {
			meTable,
			storeBoxManageListItem,
			fabButton,
		},
		mixins: [MescrollMoreMixin, ],
		data() {
			return {
				tabList: [{
						id: 1,
						name: "使用中",
						text: "使用中",
					},
					{
						id: 2,
						name: "作废",
						text: "作废",
					},
				],
				currentTab: 0,
				searchKey: "",
				customStyle: {
					padding: "30rpx",
				},
				user: this.$storage.get(this.$rp.common.USER),
				plTitle: "封箱码",
				fContent: [{
					iconPath: require('@/static/add.png'),
					selectedIconPath: require('@/static/add.png'),
					text: '添加',
					active: false,
				}],

			};
		},
		// 页面加载成功后也要设置一次，用于处理本页面刷新后失效问题
		mounted() {
			this.setRightBtns();
		},

		methods: {
			getListViewHeight() {
				let p = this.$u.sys().windowHeight - 44 - 57 - 40 - uni.upx2px(10) - this.$u.sys().statusBarHeight + "px";
				// #ifdef H5-DINGDING || H5-WECHAT
				p = this.$u.sys().windowHeight - uni.upx2px(10) - 57 - 40 - this.$u.sys().statusBarHeight + "px";
				// #endif
				return p;
			},
			tabChange(n) {
				this.currentTab = n;
				this.searchKey = "";
				this.$refs.mescrollItem0.listDatas = [];
				this.getMescroll(0).triggerDownScroll();
			},
			loadData(page) {
				let params = {
					page: page.num,
					limit: page.size,
					paras: {},
				};
				let fun = "";
				return new Promise((resolve, reject) => {
					switch (this.currentTab) {
						case 0: {
							params.paras.status = C_STORE_BOX_STATUS.WAIT_CONFIRM; // 使用中
							params.paras.storeBill = this.searchKey;
							fun = storeService.storeBoxCodeList;
						}
						break;
						case 1: {
							params.paras.status = C_STORE_BOX_STATUS.TO_VOLID; // 作废
							params.paras.storeBill = this.searchKey;
							fun = storeService.storeBoxCodeList;
						}
						break;
					}
					fun(params).then((res) => {
						if (res.success) {
							res.data.forEach((itm) => {
								this.getItemCanEdit(itm);
							});
							resolve({
								count: res.count,
								data: res.data,
							});
						} else {
							resolve({
								count: 0,
								data: [],
							});
						}
					}).catch((e) => {
						this.$u.toast("请求失败:" + e);
						resolve({
							count: 0,
							data: [],
						});
					});
				})
			},
			toSearchList() {
				this.getMescroll(0).triggerDownScroll();
			},
			addStoreBox() {
				this.setRouteParam({
					storeBill: "",
					qrUuid: "",
					qrCode: "",
					fullDocName: "",
					fullDocNo: "",
					rfidCode: "",
					storeName: "",
					psCode: "",
					caseCode: "",
					storeId: "",
					isAddGoods: true,
					formTo: "storeBox"
				});
				this.$u.route("/pages/store/box/addStoreGoods");
			},
			fabtrigger(btn) {
				if (btn.index == 0) {
					this.addStoreBox();
				}
			},
			setRightBtns() {
				// 设置右侧标题
				// #ifdef H5-DINGDING
				this.$deviceApi.setRight("添加", () => {
					// 添加封箱码操作
					this.addStoreBox();

					this.setRightBtns();
				}, true, true);
				// #endif
			},
			getItemCanEdit(item) {
				let disabled = true;
				let show = false;
				let swiperOptions = [];
				if (item.status == '1') {
					disabled = false;
				} else {
					disabled = true;
				}
				swiperOptions.push({
					text: '作废',
					action: "del",
					style: {
						backgroundColor: this.$theme.u_type_error,
					},
				});
				item.swiperOptions = swiperOptions;
				item.swiperDisabled = disabled;
				item.show = show;
			},
			swiperOpen(index) {
				this.$refs.mescrollItem0.listDatas.map((val, idx) => {
					this.$refs.mescrollItem0.listDatas[idx].show = index == val.qrUuid;
				});
			},
			// index1是数据索引 index是导航索引
			swiperClick(index1, index) {
				console.log(index1, index)
				let datas = this.$refs.mescrollItem0.listDatas;
				let cur = -1;
				for (let i = 0; i < datas.length; i++) {
					if (datas[i].qrUuid == index1) {
						cur = i;
						break;
					}
				}
				if (cur == -1) {
					this.$u.toast("选中数据无效");
					return;
				}
				if (index == 0) {
					this.$modal.confirm("确定要作废吗？", () => {
						this.$modal.showLoading("作废中...");
						let params = {
							"qrCode": datas[cur].qrCode,
						};
						storeService.destoryBillQrCode(params).then(res => {
							this.$modal.hideLoading();
							if (res.code == 200 && res.success) {
								this.$u.toast("作废成功");
								this.getMescroll(0).triggerDownScroll();
							} else {
								this.$message.error(res.msg);
							}
						}).catch(err => {
							this.$modal.hideLoading();
							this.$u.toast("停用失败" + err);
						})
					}, () => {
						this.resetSwiper()
					});
				}
			},
			resetSwiper() {
				this.$refs.mescrollItem0.listDatas.map((val, idx) => {
					this.$refs.mescrollItem0.listDatas[idx].show = false;
				});
			},
			
		}
	}
</script>

<style scoped lang="scss">
	@import "@/style/common/rightMenu.scss";

	page {
		background-color: #f3f4f5;

	}

	.content {
		background-color: #f3f4f5;
		margin-top: 35px;
	}

	.box-search-lay {
		// background-color: #fff;
		position: fixed;
		// #ifndef H5-DINGDING
		top: 44px;
		// #endif
		// #ifdef H5-DINGDING
		top: 0px;
		// #endif
		z-index: 999;
		width: 100%;
		overflow: hidden;
		background-color: #ffffff;
		border-bottom: 1px solid $u-border-color;
	}

	.boxSearch {
		padding: $cm-search-padding-row $cm-search-padding-column;

	}

	.key-search {
		width: 100%;
		margin: auto;
		padding-left: 2.5%;
		padding-right: 2.5%;
		line-height: 48px;
		border-bottom: 1px solid $u-border-color;
	}

	.pop-content-lay {
		padding: 20rpx;
		display: flex;
		height: 100%;
		flex-direction: column;
		justify-content: center;
	}

	.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}

	.list-lay {
		margin: 10px;
	}

	.list-item-root {
		margin: 10px;
		border-radius: 15px;
		overflow: hidden;
		border-bottom: 1px solid $u-border-color;
		background-color: #fff;
	}
</style>